<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Right Menu with Animation.</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>




<script type="text/javascript">

$(document).ready(function () {

/*Menu A*/
$(".menu .menu_liste li a").mouseover(function () {
$(this).stop().animate({ fontSize: "18px", paddingLeft: "15px" }, 100 );
});

$(".menu .menu_liste li a").mouseout(function () {
$(this).stop().animate({ fontSize: "12px", paddingLeft: "4px" }, 100 );
});

/*Menu B*/
$(".menu1 .menu1_liste li a").mouseover(function () {
$(this).css("background-color","#FFFFFF");
$(this).stop().animate({ paddingLeft: "20px" }, 500 );
});

$(".menu1 .menu1_liste li a").mouseout(function () {
$(this).css("background-color","#ECEFF5");
$(this).stop().animate({ paddingLeft: "4px" }, 500 );
});

/*Menu C*/
$(".sliding-element a").mouseover(function () {
$(this).stop().animate({ marginLeft: "20px" }, 500 );
});

$(".sliding-element a").mouseout(function () {
$(this).stop().animate({ marginLeft: "0px" }, 500 );
});

/*Menu D*/
$(".menu2 .menu2_liste li a").mouseover(function () {
$(this).css("background-color","#FFFFFF");
$(this).stop().animate({ paddingLeft: "50px" }, 50 );
});

$(".menu2 .menu2_liste li a").mouseout(function () {
$(this).css("background-color","#ECEFF5");
$(this).stop().animate({ paddingLeft: "4px" }, 50 );
});


/*Menu E*/
$(".sliding-element1 a").mouseover(function(){
	$(this).stop().animate({width:'250px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

$(".sliding-element1 a").mouseout(function(){
	$(this).stop().animate({width:'148px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});


/*Menu F*/
$(".sliding-element2 a").mouseover(function(){
	$(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'});
	$("div",this).css("display", "block");
});

$(".sliding-element2 a").mouseout(function(){
	$(this).stop().animate({height:'15px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

/*Menu G*/
$("#sliding-navigation3 ul li a").mouseover(function(){
		$(this).stop().animate({paddingLeft: '20px'},50);
		$(this).css({'background-color' : '#D96528'});
});

$("#sliding-navigation3 ul li a").mouseout(function(){
	$(this).stop().animate({paddingLeft: '40px'},50);
	$(this).css({'background-color' : '#45B4E0'});
});

});
</script>

</head>



<body>

<h3>Menu A</h3>
<div class="menu">


<ul class="menu_liste">

<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>

</ul>

</div>
<br/>
<h3>Menu B</h3>
<div class="menu1">


<ul class="menu1_liste">

<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>

</ul>

</div>
<br/>


<h3>Menu C</h3>
<ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Home</a></li>
<li class="sliding-element"><a href="#">Blog</a></li>
<li class="sliding-element"><a href="#">Portfolio</a></li>
<li class="sliding-element"><a href="#">CV</a></li>
<li class="sliding-element"><a href="#">Projects</a></li>
<li class="sliding-element"><a href="#">Contact Me</a></li>

</ul>

<br/>

<h3>Menu D</h3>
<div class="menu2">


<ul class="menu2_liste">

<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>

</ul>

</div>

<br/>

<h3>Menu E</h3>
<ul id="sliding-navigation1">

<li class="sliding-element1"><a href="#">Home</a></li>
<li class="sliding-element1"><a href="#">Blog</a></li>
<li class="sliding-element1"><a href="#">Portfolio</a></li>
<li class="sliding-element1"><a href="#">CV</a></li>
<li class="sliding-element1"><a href="#">Projects</a></li>
<li class="sliding-element1"><a href="#">Contact Me</a></li>

</ul>

<br/>

<h3>Menu F</h3>
<ul id="sliding-navigation2">

<li class="sliding-element2"><a href="#">Home<div class="decription">In this section, you will find all general things regarding my site...</div></a></li>
<li class="sliding-element2"><a href="#">Blog<div class="decription">In my blog you can find all my new articles and posts, so please do not hesitate to comment in.</div></a></li>
<li class="sliding-element2"><a href="#">Portfolio<div class="decription">Visit my portfolio...</div></a></li>
<li class="sliding-element2"><a href="#">CV<div class="decription">In order to let you know about my experiences, please be free to have a glance at my CV</div></a></li>
<li class="sliding-element2"><a href="#">Projects<div class="decription">All my projects that I have developed untill now</div></a></li>
<li class="sliding-element2"><a href="#">Contact Me<div class="decription">Fill in the required details to keep in touch!</div></a></li>

</ul>

<br/>

<h3>Menu G</h3>
<div id="sliding-navigation3">
	<ul>
		<li><h3 class="principal">Tutorials</h3></li>
		<li><a href="#">J2EE</a></li>
		<li><a href="#">.NET</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">jQuery</a></li>
		<li><a href="#">PHP</a></li>

		<li><h3 class="principal">Contact us</h3></li>
		<li><a href="#">You</a></li>
	</ul>
</div>



</body>
</html>